<!--
 * @description: 代码生成器自动生成
 * @author: liyubao | xufuxing
 * @version: 1.0
-->
<template>
    <div class="flex-column">
        <sticky :className="'sub-navbar'">
            <div class="filter-container">
                <el-input @keyup.enter.native="handleFilter" size="mini" style="width: 200px;" class="filter-item"
                    :placeholder="'名称'" v-model="listQuery.key"> </el-input>
                <el-button class="filter-item" size="mini" v-waves icon="el-icon-search"
                    @click="handleFilter">搜索</el-button>
                <permission-btn size="mini" v-on:btn-event="onBtnClicked"></permission-btn>
            </div>
        </sticky>
        <div class="app-container flex-item">
            <div class="bg-white" style="height: 100%;">
                <el-table ref="mainTable" :data="list" border stripe style="width: 100%;overflow-y: scroll;"
                    height="90%" @selection-change="handleSelectionChange" @row-click="rowClick">
                    <el-table-column type="selection" width="40"> </el-table-column>
                    <el-table-column type="index" label="序号" width="50"> </el-table-column>
                    <el-table-column prop="gh_createid" label="工会id" width="200"> </el-table-column>
                    <el-table-column prop="number" label="届号" width="100"> </el-table-column>
                    <el-table-column prop="changedatestart" label="换届开始日期" width="300"> </el-table-column>
                    <el-table-column prop="changedateend" label="任期结束日期" width="300"> </el-table-column>
                    <el-table-column prop="year" label="任期（年）" width="250"> </el-table-column>
                    <el-table-column prop="newnumber" label="新届号" width="150"> </el-table-column>
                    <el-table-column prop="ygcount" label="员工数量" width="200"> </el-table-column>
                    <el-table-column prop="dbcount" label="会员代表数" width="250"> </el-table-column>
                    <el-table-column prop="wycount" label="委员数" width="150"> </el-table-column>
                    <el-table-column prop="fzxcount" label="副主席数" width="200"> </el-table-column>
                    <el-table-column prop="jfsccount" label="经费审查委员数" width="350"> </el-table-column>
                    <el-table-column prop="jfsc_fzrcount" label="经费审查委员副主席数" width="500"> </el-table-column>
                    <el-table-column prop="nzgcount" label="女职工委员" width="250"> </el-table-column>
                    <el-table-column prop="nzg_fzrcount" label="女职工委员副主任" width="400"> </el-table-column>


                </el-table>
                <div class="block" style="margin-top: 15px">
                    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page"
                        :limit.sync="listQuery.limit" @pagination="getList" />
                </div>
            </div>

            <el-dialog v-el-drag-dialog class="dialog-mini gh_change" :close-on-click-modal="false"
                :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
                <edit-form style="height: 100%;" :id="eid" :etime="etime" @dataUpdate='dataUpdate'
                    @dataAdd='dataAdd'></edit-form>
            </el-dialog>

        </div>
    </div>
</template>
<script>
import * as gh_changes from '@/api/gh_changes'
import waves from '@/directive/waves' // 水波纹指令
import Sticky from '@/components/Sticky'
import permissionBtn from '@/components/PermissionBtn'
import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-dragDialog'
import extend from '@/extensions/delRows.js'
import EditForm from '../../views/gh_changes/edit.vue'

export default {
    name: 'gh_change',
    components: { Sticky, permissionBtn, Pagination, EditForm },
    directives: {
        waves,
        elDragDialog,
    },
    mixins: [extend],
    data() {
        return {
            //编辑数据ID
            eid: "",
            //子组件时间戳防止数据被缓存
            etime: "",
            headerList: [], // 主列表列定义
            multipleSelection: [], // 列表checkbox选中的值
            tableKey: 0,
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                // 查询条件
                page: 1,
                limit: 20,
                key: undefined,
            },
            temp: {},
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
                update: '编辑',
                create: '添加',
            },
            rules: {
                name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
            },
        }
    },
    created() {
        this.getList()
    },
    methods: {
        //数据编辑完成后的回调函数
        dataUpdate(id) {
            let that = this;
            that.dialogFormVisible = false;
            //用户取消编辑
            if (id == 0) {
                return;
            }
            //在table中重新请求被修改的数据
            gh_changes.get(id).then((response) => {
                for (let index = 0; index < that.list.length; index++) {
                    if (that.list[index].id == id) {
                        that.list[index] = response.result;
                        that.multipleSelection = [];
                        that.rowClick(that.list[index]);
                        break;
                    }
                }
            });
        },
        //数据新增完成后的回调函数
        dataAdd() {
            let that = this;
            that.dialogFormVisible = false;
            that.getList();
        },
        rowClick(row) {
            this.$refs.mainTable.clearSelection()
            this.$refs.mainTable.toggleRowSelection(row)
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        onBtnClicked: function (domId, callback) {
            let row;
            switch (domId) {
                case 'btnAdd':

                    this.etime = new Date();
                    this.eid = 0;
                    // 弹出添加框
                    this.dialogStatus = '添加数据'
                    this.dialogFormVisible = true

                    break
                case 'btnEdit':
                    if (this.multipleSelection.length !== 1) {
                        this.$message({
                            message: '只能选中一个进行编辑',
                            type: 'error',
                        })
                        return
                    }

                    //需要编辑的数据
                    row = this.multipleSelection[0];
                    this.etime = new Date();
                    this.eid = row.id;
                    // 弹出编辑框
                    this.dialogStatus = '编辑'
                    this.dialogFormVisible = true

                    break
                case 'btnDel':
                    if (this.multipleSelection.length < 1) {
                        this.$message({
                            message: '至少删除一个',
                            type: 'error',
                        })
                        return
                    }
                    this.handleDelete(this.multipleSelection)
                    break
                case 'btnExport':
                    this.$refs.mainTable.exportExcel('资源文件', callback)
                    break
                default:
                    break
            }
        },
        getList() {
            this.listLoading = true
            gh_changes.getList(this.listQuery).then((response) => {
                this.list = response.result;
                this.total = response.count;
                this.listLoading = false;
            });
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        handleSizeChange(val) {
            this.listQuery.limit = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.listQuery.page = val.page
            this.listQuery.limit = val.limit
            this.getList()
        },
        handleDelete(rows) {

            var that = this
            that.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                gh_changes.del(rows.map(u => u.id)).then(() => {
                    that.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                    });

                    //拉起数据
                    that.getList()
                });

            }).catch(() => {
                that.$message({
                    type: 'info',
                    message: '已取消'
                });
            });

        },
    },
}
</script>
<style scoped>
.dialog-mini .el-select {
    width: 100%;
}

.gh_change {
    width: 100% !important;
    height: 100% !important;
    margin: auto;
}

.gh_change .el-dialog {
    width: 80% !important;
    height: 80%;
    margin-top: 100px !important;
}

.gh_change .el-dialog .el-dialog__body {
    height: 100% !important;
}
</style>
